import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
  Button,
  Spinner
} from 'react-bootstrap';

import {
  URL,
  AJAX_BASE_URL,
  API_URL,
  CODE,
} from '../../config';

import {
  function_snedverify_email,
  function_chgpwd_by_email
} from '../../actions/passport';

require("./less/findpwd.css");

class App extends Component {

  state = {
    loadingFlg: false,
    email: "",
    hasSendEmail: false,
    imageCode: "",
    emailCode: "",
    password: "",
    errorMsg: ""
  }

  handleSubmit () {
    let regPrex = /^([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    if (!regPrex.test(this.state.email)) {
      this.setState({
        errorMsg: "邮箱格式不正确"
      });
      return;
    }
    if (this.state.imageCode === "") {
      this.setState({
        errorMsg: "请填写图片验证码"
      });
      return;
    }
    if (this.state.hasSendEmail) {
      if (this.state.imageCode === "") {
        this.setState({
          errorMsg: "请填写您邮箱收到的验证码"
        });
        return;
      }
      let passwordIsError = false;

      var regex = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z_!@#$%^&*`~()-+=]+$)(?![0-9_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9_!@#$%^&*`~()-+=]{8,16}$');
      if (!regex.test(this.state.password)) {
        passwordIsError = true
      }

      if (this.state.password === "") {
        passwordIsError = true
      }

      if (passwordIsError) {
        this.setState({
          errorMsg: "密码为8-16位, 必须包含大小写字母、数字、符号中至少3种"
        });
        return;
      }
    }
    this.setState({
      errorMsg: "",
      loadingFlg: true
    });
    if (this.state.hasSendEmail) {
      function_chgpwd_by_email(this.state.email, this.state.imageCode, this.state.emailCode, this.state.password, (result) => {
        if (result.code === CODE.SUCCESS) {
          alert(result.message);
          this.props.history.push(URL.login_page);
        } else {
          this.setState({
            errorMsg: result.message,
            loadingFlg: false
          });
        }
      });
    } else {
      function_snedverify_email(this.state.email, this.state.imageCode, (result) => {
        if (result.code === CODE.SUCCESS) {
          this.setState({
            hasSendEmail: true,
            errorMsg: result.message,
            loadingFlg: false
          });
        } else {
          this.setState({
            errorMsg: result.message,
            loadingFlg: false
          });
        }
      });
    }
  }

  render () {
    return (
      <div className="root-box">
        <div className="layout-logo layout-logo-for-free-register">
        </div>
        <div className="normal-form">
          <h1 className="login-title">忘记密码</h1>
          <span className="way-type">
            <Link to="#" className="operation-way-a c-txt">邮箱找回</Link>
          </span>
          <span id="mobile-error-tips" className="error-tips">{this.state.errorMsg}</span>
          <div className="operation-way-div">
            <div className="form-item form-first">
              <div>
                <input type="email" tabIndex="1" value={this.state.email} onChange={event => this.setState({ email: event.target.value })} placeholder="请输入邮箱" />
              </div>
            </div>
            <div className="form-item">
              <div>
                <input maxLength="4" autoComplete="off" className="login_txt" tabIndex="2" value={this.state.imageCode} onChange={event => this.setState({ imageCode: event.target.value })} type="text" placeholder="请输入验证码" />
                <a id="secur_code_change" href="gg" className="secur-code-change" title="换一张">
                  <img id="image" alt="验证码" src={AJAX_BASE_URL + API_URL.getVerifyImage} />
                </a>
              </div>
            </div>
            {this.state.hasSendEmail ?
              <div>
                <div className="form-item">
                  <div>
                    <input maxLength="6" autoComplete="off" tabIndex="3" value={this.state.emailCode} onChange={event => this.setState({ emailCode: event.target.value })} type="text" placeholder="请输入您邮箱收到的验证码" />
                  </div>
                </div>
                <div className="form-item">
                  <div>
                    <input autoComplete="off" tabIndex="4" value={this.state.password} onChange={event => this.setState({ password: event.target.value })} type="password" placeholder="请输入密码" />
                  </div>
                </div>
              </div>
              : null}
            <div className="form-btn" onClick={this.handleSubmit.bind(this)}>
              <Button variant="primary" type="submit" disabled={this.state.loadingFlg ? true : false}>
                {this.state.loadingFlg ?
                  <Spinner
                    as="span"
                    animation="border"
                    size="sm"
                    role="status"
                    aria-hidden="true"
                  />
                  : null}
                找回密码
              </Button>
            </div>
            <div className="form-bottom">
              <span>想起登录密码了，</span>
              <Link to={URL.login_page}>返回登录</Link>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

function mapStateToProps (state) {
  return {}
}

export default connect(mapStateToProps)(App);